<template>
	<view class="content">
		<view class="bgBox">
			<view class="centerBox" @click="route('/pages/mine/signDetail')">
				<view>
					<view style="display:flex;margin-left:18rpx;">
						<view class="txtName">
							<image src="@/static/img/bi.png" style="width:40rpx;height:40rpx;margin-top:15rpx;" />
						</view>
						<view class="text01">{{info.integral}}</view>
					</view>
					<view style="display:flex;margin-top:20rpx;" >
						<view  style="color:rgba(49, 192, 237, 1);font-size:28rpx;">积分明细</view>
						<view class="txtName">
							<image src="@/static/img/gos.png" style="width:30rpx;height:30rpx;margin-left:10rpx;" />
						</view>
					</view>
				</view>
				<!-- <button class="blueBtn" @click="route('/pages/mine/signDetail')">积分详情</button> -->

				<!-- <image src="@/static/img/img13.png" style="width: 300rpx; height: 200rpx; margin-top: 15rpx;"></image> -->
			</view>
			<view class="bgWrite" style="paading:5rpx 20rpx;">
				<view class="title01" style="font-weight: bold;
font-size: 40rpx;
color: #000000;margin-left:20rpx;">签到</view>
				<view class="signFlex">
					<view style="display: flex;">
						<view style="margin-left:20rpx;">
							<image src="@/static/img/img14.png"
								style="width: 92rpx; height: 92rpx; margin-right: 15rpx;"></image>
						</view>
						<view>
							<view class="text02">签到赠送积分</view>
							<view class="text03">积分+{{sign?.sign||''}}</view>
						</view>
					</view>
					<view class="signBtn" @click="btnSign()">签到</view>
				</view>
			</view>
		</view>
		<view class="bgWrite">
			<view class="orderBox">
				<view class="title01" style="font-weight: bold;
font-size: 32rpx;
color: #000000;margin-left:20rpx;">课程日历</view>
				<!-- {{list}} -->
				<view class="menuLinkUl">
					<view :class="item.count>0?'li1':'li'" v-for="(item,index) in lists" :key="index">
						<image src="@/static/img/sign.png" style="width: 60rpx;height: 60rpx;position:absolute;
					right:5%;bottom:5%;" v-if="item.is_sign>0"></image>
						<view v-if="item.count>0" @click="clickPup(item.date)">
							<view class="month1">课</view>
							<view class="week">{{item.week}}</view>
						</view>
						<view v-else @click="clickPup1()">
							<text class="month">{{item.month}}</text>
							<text class="week1">{{item.week}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<uv-popup ref="popup" :closeable="true" :round="10" mode="center" custom-style="height: 450rpx;">
			<view class="poupBox">
				<view class="h2Ttl" style="font-weight: bold;font-size: 34rpx;color: #000000;">我的课程</view>
				<scroll-view scroll-y="true" style="height:168rpx;">
					<view class="topBox" v-for="(item,index) in myclass" :key="index"
						@click="route('pages/mine/orderDetails',{id:item.id})">
						<view style="margin-right: 20rpx;">
							<image :src="imgUrl(item?.product_cover)"
								style="width: 188rpx; height: 188rpx;border-radius:8rpx;">
							</image>
						</view>
						<view>
							<view class="title">{{item?.product?.title}}</view>
							<view class="txtNumber">上课时间：{{item?.attr_name}}</view>
							<view class="schoolBox">
								<view class="txtAdd01">位置：{{item?.product?.schools[0]?.province?.name}}
									{{item?.product?.schools[0]?.city?.name}}
									{{item?.product?.schools[0]?.area?.name}}
									{{item?.product?.schools[0]?.area?.name}}
									{{item?.product?.schools[0]?.address}}
								</view>
								<view>
									<image src="@/static/img/icon06.png" style="width: 40rpx;height: 40rpx;"
										@click.stop="toMap(item?.product?.schools[0])"></image>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<button class="blueBtn" @click="popup.close()" style="width: 558rpx;
height: 90rpx; line-height: 90rpx; margin-top: 50rpx; border-radius: 10rpx;">确定</button>
			</view>
		</uv-popup>
		<view class="bgWrite">
			<view class="title01" style="font-weight: bold;
font-size: 40rpx;
color: #000000;margin-left:20rpx;">已报名课程</view>
			<scroll-view scroll-y="true" style="height: 100%;">
				<list ref="refList" url="/api/v1/order" res="data.data" :req="{status:'6'}">
					<template #list="{list}">
						<view class="topBox" v-for="(item,index) in list" :key="index"
							@click="route('pages/mine/orderDetails',{id:item.id})">
							<view style="margin-right: 20rpx;">
								<image :src="imgUrl(item?.product_cover)" style="width: 188rpx; height: 188rpx;">
								</image>
							</view>
							<view>
								<view class="title">{{item?.product?.title}}</view>
								<view class="txtNumber">上课时间：{{item?.attr_name}}</view>
								<view class="schoolBox">
									<view class="txtAdd01">位置：{{item?.product?.schools[0]?.province?.name}}
										{{item?.product?.schools[0]?.city?.name}}
										{{item?.product?.schools[0]?.area?.name}}
										{{item?.product?.schools[0]?.area?.name}}
										{{item?.product?.schools[0]?.address}}
									</view>
									<view>
										<image src="@/static/img/icon06.png" style="width: 40rpx;height: 40rpx;"
											@click.stop="toMap(item?.product?.schools[0])"></image>
									</view>
								</view>
							</view>
						</view>
					</template>
				</list>
				<!-- 更多内容 -->
			</scroll-view>

		</view>
	</view>
</template>

<script setup lang="ts">
	import route from '@/utils/route';
	import { toast, imgUrl } from '@/utils/fun';
	import { onLoad } from '@dcloudio/uni-app';
	import { ref, nextTick } from 'vue';
	import { http, apiPath } from '@/common/http/index';
	import list from '@/components/list';
	onLoad(() => {
		get_list()
		get_info()
		get_sign()
		get_can()

	})
	const [info, sign, loading, lists, popup, refList, date, myclass] = [ref({}), ref(), ref(false), ref(), ref(), ref(), ref(), ref()]
	//获取分页
	const get_list = () => {
		nextTick(() => {
			refList.value.init()
		})
	};
	//弹出框 
	const clickPup = (item) => {
		popup.value.open();
		date.value = item;
		get_class();
	}
	const clickPup1 = (item) => {
			toast('当前无课程！')
	}
	const toMap = (item) => {
		uni.openLocation({
			name: item.name,
			latitude: Number(item.place.split(',')[1]), //要去的纬度
			longitude: Number(item.place.split(',')[0]), //要去的经度 
			address: item.address, //要去的具体地址 
		})
	}
	//获取当前的课程信息
	const get_class = async () => {
		myclass.value = (await http.get('/api/v1/order?date=' + date.value)).data.data;//获取左侧菜单
		console.log("1111", myclass.value)
	};
	//获取个人的信息
	const get_info = async () => {
		info.value = (await http.get('/api/v1/user/info')).data;//获取左侧菜单
	};
	//签到
	const get_sign = async () => {
		sign.value = (await http.get('/api/v1/setting')).data;//获取左侧菜单
	};
	//日历
	const get_can = async () => {
		lists.value = (await http.get('/api/v1/calendar')).data;//获取左侧菜单
		console.log("1111", list.value)
	};
	const btnSign = (e) => {
		http.post(`/api/v1/user/sign`, { custom: { loading: true } }).then((res : any) => {
			toast(res.data);
			setTimeout(() => {
				get_info();
				get_can();
				loading.value = false;
			}, 1000);
		})
			.catch((err) => {
				setTimeout(() => {
					loading.value = false;

				}, 1500);
			});
	};
</script>
<style lang="scss" scoped>
	page {
		background: rgba(248, 249, 251, 1) url('@/static/img/bg02.png');
		/* 设置背景图片 */
		background-size: 100% auto;
		/* 背景图片覆盖整个元素 */
		background-position: top center;
		/* 背景图片居中 */
		background-repeat: no-repeat;
		/* 背景图片不重复 */
	}

	.content {
		padding-bottom: 50rpx;
	}

	.blueBtn {
		margin: 10rpx 0 0;
		width: 164rpx;
		height: 64rpx;
		font-size: 24rpx;
		opacity: 1;
		color: #fff;
		border-radius: 99px;
		background: #31C0ED;
	}

	::v-deep .blueBtn:after {
		border: none;
	}

	.hTtl {
		text-align: center;
		padding: 60rpx;
		font-size: 32rpx;
		/* font-weight: 700; */
		line-height: 21px;
		color: rgba(0, 0, 0, 1);
	}

	.centerBox {
		padding: 60rpx 40rpx 35rpx;
		background-image: url('@/static/img/bg02.png');
		background-repeat: no-repeat;
		display: flex;
		justify-content: center;
		widrh: 100%;
	}

	.centerBox .txtName {
		color: rgba(49, 192, 237, 1);
		font-size: 32rpx;
	}

	.text01 {
		display: block;
		color:rgba(49, 192, 237, 1);
		font-size: 50rpx;
		margin-left:20rpx;
	}


	.signFlex {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.text02 {
		font-size: 28rpx;
		color: rgba(51, 51, 51, 1);
		line-height: 50rpx;
	}

	.text03 {
		line-height: 40rpx;
		font-size: 24rpx;
		/* color: rgba(255, 255, 255, 1); */
		color: rgba(251, 181, 69, 1);
	}

	.text04 {
		color: rgba(156, 160, 175, 1);
		font-size: 26rpx;
	}

	.bgWrite {
		margin: 0 10rpx 30rpx;
		background: #fff;
		border-radius: 15rpx;
		padding: 30rpx 15rpx 25rpx 10rpx;
		margin: 0 30rpx 30rpx;
	}

	.title01 {
		margin-bottom: 40rpx;
		padding: 0 0;
		font-size: 30rpx;
		line-height: 21px;
		color: rgba(16, 2, 25, 1);
	}

	.signBtn {
		font-size: 26rpx;
		border-radius: 99rpx;
		background: rgba(49, 192, 237, 1);
		width: 150rpx;
		height: 60rpx;
		color: #fff;
		line-height: 60rpx;
		text-align: center;
		margin-right: 10rpx;
	}

	.orderBox {
		/* height: 750rpx; */
		/* 	display: flex;
		justify-content: space-between;
		align-items: center; */
		/* margin-bottom: 50rpx; */
	}

	.menuLinkUl {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
		margin: 0 1rpx;
	}

	.menuLinkUl .li {
		margin: 5rpx 0rpx 5rpx 25rpx;
		padding: 15rpx 10rpx 15rpx;
		box-sizing: border-box;
		text-align: center;
		width: 16%;
		background: #F5F5F5;
		border-radius: 14rpx;
		position: relative;
	}

	.li1 {
		margin: 5rpx 0rpx 5rpx 25rpx;
		padding: 15rpx 10rpx;
		box-sizing: border-box;
		text-align: center;
		width: 16%;
		background: #F5C955;
		box-shadow: 0rpx 6rpx 12rpx 2rpx #FFE8B5;
		border-radius: 14rpx;
		position: relative;
	}

	.month1 {
		background: #E5A20F;
		width: 25px;
		height: 25px;
		line-height: 25px;
		border-radius: 50%;
		color: #fff;
		margin: 6rpx 15rpx;
		font-size: 13px;
	}

	.month {
		background: #E6E6E6;
		font-weight: 500;
		font-size: 24rpx;
		color: #000000;
		line-height: 26rpx;
		width: 25px;
		height: 25px;
		line-height: 25px;
		border-radius: 50%;
		margin: 6rpx 15rpx;
	}

	.week1 {
		color: #999;
		font-size: 30rpx;
		margin: 5px 0;
	}

	.week {
		color: #fff;
		font-size: 30rpx;
		margin: 5px 0;
	}

	.menuLinkUl .li text {
		text-align: center;
		display: block;
		font-size: 24rpx;
	}

	.useLink {
		line-height: 50rpx;
		margin-top: 30rpx;
	}

	.topBox {
		margin-bottom: 1rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.title {
		font-weight: bold;
		color: #000000;
		margin-bottom: 10rpx;
		font-size: 30rpx;
	}

	.txtNumber {
		font-weight: 500;
		font-size: 24rpx;
		color: #999999;
		/* font-weight: 500; */
	}

	.schoolBox {
		display: flex;
		justify-content: space-between;
		align-items: center;
		/* border-top: 1px solid rgba(242, 242, 242, 1); */
		/* padding-top: 10rpx; */
		margin-top: 10rpx;
	}

	.txtAdd01 {
		padding-right: 30rpx;
		font-size: 22rpx;
		line-height: 40rpx;
		font-size: 22rpx;
		color: #666666;
	}

	.poupBox {
		padding: 20rpx 30rpx 30rpx;
		width: 600rpx;
	}

	.h2Ttl {
		margin-bottom: 40rpx;
		text-align: center;
	}
</style>